﻿<%@ Page Language="VB" AutoEventWireup="false" CodeFile="index.aspx.vb" Inherits="Common_index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 用于响应式布局，遇到移动设备自动更改 -->
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 导入的css文件,用于响应式布局 -->
    <link href="../css/bootstrap-theme.css" rel="stylesheet" />
    
    <link href="../css/bootstrap.css" rel="stylesheet" />
    <!-- bootstrap需要的函数库 -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <script src="../js/npm.js"></script>
    <script src="../js/plugins.js"></script>
    <!-- 所需的字体图标库 -->
    <link rel="stylesheet" href="../css/font-awesome.min.css"/>
    <!-- 按钮样式 -->
    <link href="../css/MyButtons.css" rel="stylesheet" /> 
    <link href="../css/carousel.css" rel="stylesheet" />
    <script src="../js/content.js"></script>
    <script src="../js/jquery-2.1.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>


    <!-- Loading Flat UI -->
    <link href="../css/flat-ui.css" rel="stylesheet"/>
    <link href="../docs/assets/css/demo.css" rel="stylesheet"/>
    <link href="../dist/css/flat-ui.min.css" rel="stylesheet" />
 

     <script src="../dist/js/vendor/jquery.min.js"></script>
    <script src="../dist/js/vendor/video.js"></script>
    <script src="../dist/js/flat-ui.min.js"></script>
    <script src="../docs/assets/js/application.js"></script>

    <!-- tab切换效果的js和css -->
    <script src="../js/TabJS.js"></script>

    <link href="../dist/css/styleTabs.css" rel="stylesheet" />
    <style type="text/css">
    h1{font-family:'Microsoft YaHei';}
    </style>
     <title>图书管理系统首页</title>

</head>
<body style="width:1024px;margin-left:auto;margin-right:auto;">
    <form id="form1" runat="server">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background:#0767c8;border-color:#0767c8;min-height:55px;">
      <div class="container-fluid">
        <div class="navbar-header">
            <img src="../img/common/logo2.png" width="180" style="position:absolute;margin:2px 130px"/>
          <a class="navbar-brand" href="#"></a>
        </div>

          <div id="navbar" class="navbar-collapse collapse">

          <ul class="nav navbar-nav navbar-right" style="margin-right: 299px;">
            <li style="position: absolute;margin: 2px -314px;"><a href="#">借阅</a></li>
            <li style="position: absolute;margin: 2px -264px;"><a href="#">归还</a></li>
            <li style="position: absolute;margin: 2px -214px;"><a href="#">检索</a></li>
            <li style="position: absolute;margin: 2px -164px;"><a href="#">资源</a></li>
            <li style="position: absolute;margin: 2px 64px;"><a href="#" data-toggle="modal" data-target="#myModal"><span  class="glyphicon glyphicon-log-in"></span> 登录</a></li>

          </ul>
            <input type="text" class="form-control navbar-left" placeholder="查找您感兴趣的书籍..." style="width:329px;margin-top:5px;margin-left:304px;"/> 
            <a href="#" class="button button-primary button-rounded" style="background:#0e78e7;height:42px;width:42px;margin: 5px 0px 0px -7px;padding:inherit;"><i class="icon-search"></i></a>
        </div>
       
      </div>
    </nav>


        <div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:1024px;margin-left:auto;margin-right:auto;">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class=""></li>
        <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active left">
          <img src="" alt="First slide"/>
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="item next left">
          <img src="" alt="Second slide"/>
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="" alt="Third slide"/>
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
        <h1 class="page-header" style="font-size:37px;">推荐书籍</h1>
        <ol class="breadcrumb" style="    padding: 0px 2px;background: none;margin: -66px 830px;position: absolute;width: 300px;">
        <li ><a href="#">Home</a></li>
        <li><a href="#">2013</a></li>
        <li ><a href="#">十一月</a></li>
        </ol>
        <div class="row demo-tiles" ">
        <div class="col-xs-3">
          <div class="tile">
            <img src="../img/icons/svg/compas.svg" alt="Compas" class="tile-image big-illustration" />
            <h3 class="tile-title">Web Oriented</h3>
            <p>100% convertable to HTML/CSS layout.</p>
            <a class="btn btn-primary btn-large btn-block" href="">Get Pro</a>
          </div>
        </div>

        <div class="col-xs-3">
          <div class="tile">
            <img src=""../img/icons/svg/pencils.svg" height="151px"  alt="Infinity-Loop" class="tile-image img-rounded"/>
            <h3 class="tile-title">Easy to Customize</h3>
            <p>Vector-based shapes and minimum of layer styles.</p>
            <a class="btn btn-primary btn-large btn-block" href="">Get Pro</a>
          </div>
        </div>

        <div class="col-xs-3">
          <div class="tile">
            <img src="../img/icons/svg/pencils.svg" alt="Pensils" class="tile-image img-rounded">
            <h3 class="tile-title">Color Swatches</h3>
            <p>Easy to add or change elexcvbxcvbxcvbxvbxcvbfdgdsfgAdfhhjndgfdfgments. </p>
            <a class="btn btn-primary btn-large btn-block" href="">Get Pro</a>
          </div>
        </div>

        <div class="col-xs-3">
          <div class="tile tile-hot">
            <img src="../../img/icons/svg/ribbon.svg" alt="ribbon" class="tile-hot-ribbon">
            <img src="../img/icons/svg/chat.svg" alt="Chat" class="tile-image">
            <h3 class="tile-title">Free for Share</h3>
            <p>Your likes, shares and comments helps us.</p>
            <a class="btn btn-primary btn-large btn-block" href="">Get Pro</a>
          </div>

        </div>
      </div>
         <h1 class="page-header" style="font-size:37px;margin-top:10px;">新书入库</h1>
        <article class="htmleaf-container">
            <style type="text/css">
            .tabs{    z-index: 15;
                     position: relative;
                     background: #FFFFFF;
                     width: 100%;
                     border-radius: 4px;
                     box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
                     box-sizing: border-box;
                     margin: -16px auto 10px;
                     overflow: hidden;}
            </style>
	<div class="tabs">
	  <div class="tabs-header" style="overflow:visible;">
		<div class="border"></div>
		<ul>
		  <li class="active"><a href="#tab-1" tab-id="1" ripple="ripple" ripple-color="#FFF">Tab 1</a></li>
		  <li><a href="#tab-2" tab-id="2" ripple="ripple" ripple-color="#FFF">Tab 2</a></li>
		  <li><a href="#tab-3" tab-id="3" ripple="ripple" ripple-color="#FFF">Tab 3</a></li>
		  <li><a href="#tab-4" tab-id="4" ripple="ripple" ripple-color="#FFF">Tab 4</a></li>
		  <li><a href="#tab-5" tab-id="5" ripple="ripple" ripple-color="#FFF">Tab 5</a></li>
		</ul>
		<nav class="tabs-nav"><i id="prev" ripple="ripple" ripple-color="#FFF" class="material-icons">&#xE314;</i><i id="next" ripple="ripple" ripple-color="#FFF" class="material-icons">&#xE315;</i></nav>
	  </div>
	  <div class="tabs-content">
		<div tab-id="1" class="tab active">1. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Ellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.<br /><br /></div>
		<div tab-id="2" class="tab">2. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam.</div>
		<div tab-id="3" class="tab">3. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.</div>
		<div tab-id="4" class="tab">4. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</div>
		<div tab-id="5" class="tab">5. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor.Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</div>
	  </div>
	</div>
</article>

   <h1 class="page-header" style="font-size:37px;margin-top:41px;">猜你喜欢</h1>
      <div class="container" style="    width: 1041px;">
        <div class="row">
          <div class="col-xs-7">
            <h3 class="footer-title">Subscribe</h3>
            <p>Do you like this freebie? Want to get more stuff like this?<br>
              Subscribe to designmodo news and updates to stay tuned on great designs.<br>
              Go to: <a href="http://designmodo.com/flat-free" target="_blank">designmodo.com/flat-free</a>
            </p>

            <p class="pvl">
              <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://designmodo.com/flat-free/" data-text="Flat UI Free - PSD&amp;amp;HTML User Interface Kit" data-via="designmodo">Tweet</a>
							<script id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script><script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
              <iframe src="http://ghbtns.com/github-btn.html?user=designmodo&amp;repo=Flat-UI&amp;type=watch&amp;count=true" height="20" width="107" frameborder="0" scrolling="0" style="width:105px; height: 20px;" allowtransparency="true"></iframe>
              <iframe src="http://ghbtns.com/github-btn.html?user=designmodo&amp;repo=Flat-UI&amp;type=fork&amp;count=true" height="20" width="107" frameborder="0" scrolling="0" style="width:105px; height: 20px;" allowtransparency="true"></iframe>
              <iframe src="http://ghbtns.com/github-btn.html?user=designmodo&amp;type=follow&amp;count=true" height="20" width="195" frameborder="0" scrolling="0" style="width:195px; height: 20px;" allowtransparency="true"></iframe>
            </p>

            <a class="footer-brand" href="http://designmodo.com" target="_blank">
              <img src="docs/assets/img/footer/logo.png" alt="Designmodo.com">
            </a>
          </div> <!-- /col-xs-7 -->

          <div class="col-xs-5">
            <div class="footer-banner">
              <h3 class="footer-title">Get Flat UI Pro</h3>
              <ul>
                <li>Tons of Basic and Custom UI Elements</li>
                <li>A Lot of Useful Samples</li>
                <li>More Vector Icons and Glyphs</li>
                <li>Pro Color Swatches</li>
                <li>Bootstrap Based HTML/CSS/JS Layout</li>
              </ul>
              Go to: <a href="http://designmodo.com/flat" target="_blank">designmodo.com/flat</a>
            </div>
          </div>
        </div>
      </div>

        <h1 class="page-header" style="font-size:37px;"> </h1>
       <div class="footer-brand" style
           ="margin-left:auto;margin-right:auto;"><a href="#">后台管理</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">联系作者</a></div>

        <!--模拟框提交-->
    
        <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					用户登录
				</h4>
			</div>
			<div class="modal-body">
	
          <div class="login-form">
            <div class="form-group">
              <input type="text" class="form-control login-field" value="" placeholder="Enter your name" id="login-name" />
              <label class="login-field-icon fui-user" for="login-name"></label>
            </div>

            <div class="form-group">
              <input type="password" class="form-control login-field" value="" placeholder="Password" id="login-pass" />
              <label class="login-field-icon fui-lock" for="login-pass"></label>
            </div>
      </div>
                <a class="login-link" href="#">Lost your password?</a>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					登陆
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
        </div>

    </form>
</body>
   
</html>
